<template>
  <div class="dataScreen-container">
    <div ref="dataScreenRef" class="dataScreen-content">
      <div class="dataScreen-header">
        <div class="header-lf">
          <span class="header-screening" @click="router.push({ path: '/index' })">
            首页
          </span>
        </div>
        <div class="header-ct">
          <div class="header-ct-title">
            <span>可视化大数据展示平台</span>
            <div class="header-ct-warning">
             xxxxx
            </div>
          </div>
        </div>
        <div class="header-ri">
          <span class="header-download" @click="handleClick">
            {{!fullscreen ? '全屏' : '退出全屏'}}
          </span>
          <span class="header-time">当前时间：{{ time }}</span>
        </div>
      </div>
      <div class="dataScreen-main">
        <div class="dataScreen-lf">
          <div class="dataScreen-top">
            <div class="dataScreen-main-title">
              <span>实时交易金额统计</span>
              <img src="./images/dataScreen-title.png" alt="">
            </div>
            <div class="dataScreen-main-chart">
              <real-time-access-chart/>
            </div>
          </div>
          <div class="dataScreen-center">
            <div class="dataScreen-main-title">
              <span>订单概况</span>
              <img src="./images/dataScreen-title.png" alt="">
            </div>
            <div class="dataScreen-main-chart">
              <order-ratio-chart />
            </div>
          </div>
          <div class="dataScreen-bottom">
            <div class="dataScreen-main-title">
              <span>收款金额比例</span>
              <img src="./images/dataScreen-title.png" alt="">
            </div>
            <div class="dataScreen-main-chart">
              <pay-amount-ratio-chart />
            </div>
          </div>
        </div>
        <div class="dataScreen-ct">
          <div class="dataScreen-map">
            <div class="dataScreen-map-title">
              全国商家分布
            </div>
            <ChinaMapChart />
          </div>
          <div class="dataScreen-cb">
            <div class="dataScreen-main-title">
              <span>平台交易趋势图</span>
              <img src="./images/dataScreen-title.png" alt="">
            </div>
            <div class="dataScreen-main-chart">
              <trade-trends-chart />
            </div>
          </div>
        </div>
        <div class="dataScreen-rg">
          <div class="dataScreen-top">
            <div class="dataScreen-main-title">
              <span>商家交易排行</span>
              <img src="./images/dataScreen-title.png" alt="">
            </div>
            <div class="dataScreen-main-chart">
              <seller-chart />
            </div>
          </div>
          <div class="dataScreen-center">
            <div class="dataScreen-main-title">
              <span>代理区域交易排行</span>
              <img src="./images/dataScreen-title.png" alt="">
            </div>
            <div class="dataScreen-main-chart">
              <agent-chart />
            </div>
          </div>
          <div class="dataScreen-bottom">
            <div class="dataScreen-main-title">
              <span>收款单量比例</span>
              <img src="./images/dataScreen-title.png" alt="">
            </div>
            <div class="dataScreen-main-chart">
              <pay-quantity-chart />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup >
import { useRouter } from 'vue-router'
import dayjs from 'dayjs';
import RealTimeAccessChart from "@/views/largeScreen/components/RealTimeAccessChart.vue";
import OrderRatioChart from "@/views/largeScreen/components/OrderRatioChart.vue";
import PayAmountRatioChart from "@/views/largeScreen/components/PayAmountRatioChart.vue";
import SellerChart from "@/views/largeScreen/components/SellerChart.vue";
import AgentChart from "@/views/largeScreen/components/AgentChart.vue";
import PayQuantityChart from "@/views/largeScreen/components/PayQuantityChart.vue";
import TradeTrendsChart from "@/views/largeScreen/components/TradeTrendsChart.vue";
import ChinaMapChart from "@/views/largeScreen/components/ChinaMapChart.vue";

defineOptions({
  name: 'DataScreen',
})
const router = useRouter()
const dataScreenRef = ref(null)
const fullscreen = ref(false)

onMounted(() => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
    dataScreenRef.value.style.width = `1920px`
    dataScreenRef.value.style.height = `1080px`
  }
  window.addEventListener('resize', resize)
})

// 设置响应式
function resize() {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
  }
}

// 根据浏览器大小推断缩放比例
function getScale(width = 1920, height = 1080) {
  let ww = window.innerWidth / width
  let wh = window.innerHeight / height
  return ww < wh ? ww : wh
}

// 获取当前时间
let timer = null
let time = ref(dayjs().format('YYYY年MM月DD HH:mm:ss'))
timer = setInterval(() => {
  time.value = dayjs().format('YYYY年MM月DD HH:mm:ss')
}, 1000)

function handleKeyDown(event){
  if (event.key === 'F11') {
    event.preventDefault(); // 阻止默认的 F11 行为
    toggleFullscreen();
  }
}

function handleClick() {
  toggleFullscreen();
}

// 检查全屏状态的函数
function checkFullscreen () {
  const doc = window.document;
  fullscreen.value = !!(
      doc.fullscreenElement ||
      doc.webkitFullscreenElement ||
      doc.mozFullScreenElement ||
      doc.msFullscreenElement
  );
}
// 监听全屏状态变化事件
function handleFullscreenChange () {
  checkFullscreen();
}

function toggleFullscreen() {
  const doc = window.document;
  const docEl = doc.documentElement;
  const requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
  const cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;
  if (!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
    // 进入全屏
    requestFullScreen.call(docEl);
  } else {
    // 退出全屏
    cancelFullScreen.call(doc);
  }
}

onMounted(() => {
  window.addEventListener('keydown', handleKeyDown);
  checkFullscreen();
  window.addEventListener('fullscreenchange', handleFullscreenChange);
  window.addEventListener('webkitfullscreenchange', handleFullscreenChange);
  window.addEventListener('mozfullscreenchange', handleFullscreenChange);
  window.addEventListener('MSFullscreenChange', handleFullscreenChange);
})

onUnmounted(() => {
  window.removeEventListener('keydown', handleKeyDown);
  window.removeEventListener('fullscreenchange', handleFullscreenChange);
  window.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
  window.removeEventListener('mozfullscreenchange', handleFullscreenChange);
  window.removeEventListener('MSFullscreenChange', handleFullscreenChange);
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', resize)
  clearInterval(timer)
})
</script>
<style lang="scss" scoped>
@import "./index";
</style>
